<script setup lang="ts">
import {Bottom,More} from '@element-plus/icons-vue'
import {ref} from 'vue'
let isDowm=ref(true)

const changeDown=()=>{
  isDowm.value=!isDowm.value
}
</script>

<template>
  <el-col class="upload_file">
    <!--     头部-->
    <el-image src="100.png" class="upload_file_img"/>

    <!--     中间部分-->
    <div class="file_context"  style="width: 1300px;margin-left: 20px" >
      <el-text style="font-size: 16px">01.pdf</el-text>
      <el-progress :percentage="20" color="#409eff" />
      <div class="file_context_btn">
        <el-text style="font-size: 13px">24.7MB/93.4MB</el-text>
        <el-text style="font-size: 10px;margin-left: 990px" v-if="!isDowm">暂停下载</el-text>
        <el-text style="font-size: 10px;margin-left: 990px" v-if="isDowm">网速</el-text>
      </div>
    </div>

    <!--     尾部-->
    <div class="upload_file_logo" style="margin-top: 10px">
      <el-button    :icon="Bottom" circle type="primary" v-if="!isDowm" @click="changeDown"></el-button>
      <el-button :icon="More" type="primary" circle v-if="isDowm" @click="changeDown"></el-button>
    </div>

  </el-col>
</template>

<style scoped lang="less">
.upload_file{
  height: 60px;
  display: flex;
  .upload_file_img{

    height: 60px;
    width: 60px;

    .file_context{
      width: 1500px;
      margin-left: 500px;
      background-color: #1B1464;
      .el-progress{
        width: 1300px;
        margin-top: 10px;
      }
    }

  }
}
</style>